<template>
  <div class="row justify-content-center">
    <div class="col-8">
      <form name="editForm" role="form" novalidate v-on:submit.prevent="save()">
        <h2 id="roomAdminApp.roomGoodSearch.home.createOrEditLabel" data-cy="RoomGoodSearchCreateUpdateHeading">
          Create or edit a RoomGoodSearch
        </h2>
        <div>
          <div class="form-group" v-if="roomGoodSearch.id">
            <label for="id">ID</label>
            <input type="text" class="form-control" id="id" name="id" v-model="roomGoodSearch.id" readonly />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-bkRoomType">Bk Room Type</label>
            <input
              type="text"
              class="form-control"
              name="bkRoomType"
              id="room-good-search-bkRoomType"
              data-cy="bkRoomType"
              :class="{ valid: !$v.roomGoodSearch.bkRoomType.$invalid, invalid: $v.roomGoodSearch.bkRoomType.$invalid }"
              v-model="$v.roomGoodSearch.bkRoomType.$model"
            />
            <div v-if="$v.roomGoodSearch.bkRoomType.$anyDirty && $v.roomGoodSearch.bkRoomType.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomGoodSearch.bkRoomType.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-bkNo">Bk No</label>
            <input
              type="text"
              class="form-control"
              name="bkNo"
              id="room-good-search-bkNo"
              data-cy="bkNo"
              :class="{ valid: !$v.roomGoodSearch.bkNo.$invalid, invalid: $v.roomGoodSearch.bkNo.$invalid }"
              v-model="$v.roomGoodSearch.bkNo.$model"
            />
            <div v-if="$v.roomGoodSearch.bkNo.$anyDirty && $v.roomGoodSearch.bkNo.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomGoodSearch.bkNo.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-title">Title</label>
            <textarea
              class="form-control"
              name="title"
              id="room-good-search-title"
              data-cy="title"
              :class="{ valid: !$v.roomGoodSearch.title.$invalid, invalid: $v.roomGoodSearch.title.$invalid }"
              v-model="$v.roomGoodSearch.title.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-price">Price</label>
            <input
              type="text"
              class="form-control"
              name="price"
              id="room-good-search-price"
              data-cy="price"
              :class="{ valid: !$v.roomGoodSearch.price.$invalid, invalid: $v.roomGoodSearch.price.$invalid }"
              v-model="$v.roomGoodSearch.price.$model"
            />
            <div v-if="$v.roomGoodSearch.price.$anyDirty && $v.roomGoodSearch.price.$invalid">
              <small class="form-text text-danger" v-if="!$v.roomGoodSearch.price.maxLength">
                This field cannot be longer than 32 characters.
              </small>
            </div>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-roomBasic">Room Basic</label>
            <textarea
              class="form-control"
              name="roomBasic"
              id="room-good-search-roomBasic"
              data-cy="roomBasic"
              :class="{ valid: !$v.roomGoodSearch.roomBasic.$invalid, invalid: $v.roomGoodSearch.roomBasic.$invalid }"
              v-model="$v.roomGoodSearch.roomBasic.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-roomTransaction">Room Transaction</label>
            <textarea
              class="form-control"
              name="roomTransaction"
              id="room-good-search-roomTransaction"
              data-cy="roomTransaction"
              :class="{ valid: !$v.roomGoodSearch.roomTransaction.$invalid, invalid: $v.roomGoodSearch.roomTransaction.$invalid }"
              v-model="$v.roomGoodSearch.roomTransaction.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-rentBasic">Rent Basic</label>
            <textarea
              class="form-control"
              name="rentBasic"
              id="room-good-search-rentBasic"
              data-cy="rentBasic"
              :class="{ valid: !$v.roomGoodSearch.rentBasic.$invalid, invalid: $v.roomGoodSearch.rentBasic.$invalid }"
              v-model="$v.roomGoodSearch.rentBasic.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-communityId">Community Id</label>
            <input
              type="number"
              class="form-control"
              name="communityId"
              id="room-good-search-communityId"
              data-cy="communityId"
              :class="{ valid: !$v.roomGoodSearch.communityId.$invalid, invalid: $v.roomGoodSearch.communityId.$invalid }"
              v-model.number="$v.roomGoodSearch.communityId.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-roomFeatures">Room Features</label>
            <textarea
              class="form-control"
              name="roomFeatures"
              id="room-good-search-roomFeatures"
              data-cy="roomFeatures"
              :class="{ valid: !$v.roomGoodSearch.roomFeatures.$invalid, invalid: $v.roomGoodSearch.roomFeatures.$invalid }"
              v-model="$v.roomGoodSearch.roomFeatures.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-roomSellPoint">Room Sell Point</label>
            <textarea
              class="form-control"
              name="roomSellPoint"
              id="room-good-search-roomSellPoint"
              data-cy="roomSellPoint"
              :class="{ valid: !$v.roomGoodSearch.roomSellPoint.$invalid, invalid: $v.roomGoodSearch.roomSellPoint.$invalid }"
              v-model="$v.roomGoodSearch.roomSellPoint.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-communityIntroduction">Community Introduction</label>
            <textarea
              class="form-control"
              name="communityIntroduction"
              id="room-good-search-communityIntroduction"
              data-cy="communityIntroduction"
              :class="{
                valid: !$v.roomGoodSearch.communityIntroduction.$invalid,
                invalid: $v.roomGoodSearch.communityIntroduction.$invalid,
              }"
              v-model="$v.roomGoodSearch.communityIntroduction.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-roomIntroduction">Room Introduction</label>
            <textarea
              class="form-control"
              name="roomIntroduction"
              id="room-good-search-roomIntroduction"
              data-cy="roomIntroduction"
              :class="{ valid: !$v.roomGoodSearch.roomIntroduction.$invalid, invalid: $v.roomGoodSearch.roomIntroduction.$invalid }"
              v-model="$v.roomGoodSearch.roomIntroduction.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-surroundingFacilities">Surrounding Facilities</label>
            <textarea
              class="form-control"
              name="surroundingFacilities"
              id="room-good-search-surroundingFacilities"
              data-cy="surroundingFacilities"
              :class="{
                valid: !$v.roomGoodSearch.surroundingFacilities.$invalid,
                invalid: $v.roomGoodSearch.surroundingFacilities.$invalid,
              }"
              v-model="$v.roomGoodSearch.surroundingFacilities.$model"
            ></textarea>
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-good-search-transportation">Transportation</label>
            <textarea
              class="form-control"
              name="transportation"
              id="room-good-search-transportation"
              data-cy="transportation"
              :class="{ valid: !$v.roomGoodSearch.transportation.$invalid, invalid: $v.roomGoodSearch.transportation.$invalid }"
              v-model="$v.roomGoodSearch.transportation.$model"
            ></textarea>
          </div>
        </div>
        <div>
          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" v-on:click="previousState()">
            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
          </button>
          <button
            type="submit"
            id="save-entity"
            data-cy="entityCreateSaveButton"
            :disabled="$v.roomGoodSearch.$invalid || isSaving"
            class="btn btn-primary"
          >
            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script lang="ts" src="./room-good-search-update.component.ts"></script>
